{% extends 'base.html' %}

{% set current_page = 'dashboard' %}
{% set current_menu = 'project' %}

{% block title %}项目看板 - 项目管理系统{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 项目数量概览模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-primary">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-chart-line mr-2"></i>项目数量概览
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 已立项项目 -->
                <div class="bg-primary rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已立项项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.total_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 未开始项目 -->
                <div class="bg-gray-700 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">未开始项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.not_started_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 进行中项目 -->
                <div class="bg-blue-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">进行中项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.in_progress_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已结项项目 -->
                <div class="bg-green-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已结项项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.completed_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目类型分布和项目来源模块 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 项目类型分布模块 -->
        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div class="px-4 py-3 bg-blue-500">
                <h2 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-pie-chart mr-2"></i>项目类型分布
                </h2>
            </div>
            <div class="p-6">
                <div class="h-64">
                    <div id="projectTypeChart" style="width: 100%; height: 100%;"></div>
                </div>
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">类型占比明细：</h3>
                    <ul class="space-y-2">
                        {% for i in range(project_types.labels|length) %}
                        <li class="flex items-center py-1 px-2 rounded-md hover:bg-gray-50 transition-colors">
                            <span class="inline-block w-3 h-3 mr-2 rounded-sm bg-[{{ project_types.backgroundColor[i] }}]"></span>
                            <span class="text-sm text-gray-700">{{ project_types.labels[i] }}: {{ project_types.data[i] }}个项目 {% if stats.total_projects > 0 %}({{ "%.1f"|format(project_types.data[i]/stats.total_projects*100) }}%){% else %}(0%){% endif %}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 项目来源模块 -->
        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div class="px-4 py-3 bg-amber-500">
                <h2 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-chart-bar mr-2"></i>项目来源分布
                </h2>
            </div>
            <div class="p-6">
                <div class="h-64">
                    <div id="projectSourceChart" style="width: 100%; height: 100%;"></div>
                </div>
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">项目编号明细：</h3>
                    <ul class="space-y-2">
                        {% for i in range(project_sources.labels|length) %}
                        <li class="flex items-start py-1 px-2 rounded-md hover:bg-gray-50 transition-colors">
                            <span class="font-medium text-sm text-gray-700 mr-2">{{ project_sources.labels[i] }}:</span>
                            <span class="text-sm text-gray-500">{{ project_sources.project_numbers[i] }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目经理负载模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-green-500">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-users-cog mr-2"></i>项目经理负载情况
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">项目经理</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责项目数量</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">联系方式</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for manager in managers_load %}
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 flex items-center">
                                <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-gray-500"></i>
                                </div>
                                {{ manager.name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
                                    {{ manager.count }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ manager.contact }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 项目任务进度模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-red-500">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-tasks mr-2"></i>项目任务进度
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <!-- 筛选条件 -->
            <div class="mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="projectFilter" class="block text-sm font-medium text-gray-700 mb-1">项目名称筛选：</label>
                        <select id="projectFilter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-lg">
                            <option value="all">全部项目</option>
                            {% for project in all_projects %}
                            <option value="{{ project.id }}">{{ project.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">任务状态筛选：</label>
                        <div class="flex space-x-2">
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors">未开始</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">进行中</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors">已验收</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors">已完成</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务数量展示 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 里程碑任务数 -->
                <div class="bg-indigo-600 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">里程碑任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.milestone_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已验收里程碑任务数 -->
                <div class="bg-amber-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已验收里程碑任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.accepted_milestone_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 子任务任务数 -->
                <div class="bg-blue-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">子任务任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.sub_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已验收任务数 -->
                <div class="bg-green-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已验收任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.accepted_sub_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script>
    // 项目类型分布图表
    var projectTypeChart = echarts.init(document.getElementById('projectTypeChart'));
    var projectTypeOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '项目类型',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {% for i in range(project_types.labels|length) %}
                    { value: {{ project_types.data[i] }}, name: '{{ project_types.labels[i] }}' },
                    {% endfor %}
                ]
            }
        ]
    };
    projectTypeChart.setOption(projectTypeOption);

    // 项目来源分布图表
    var projectSourceChart = echarts.init(document.getElementById('projectSourceChart'));
    var projectSourceOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: {{ project_sources.labels|tojson }},
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '项目数量',
                type: 'bar',
                barWidth: '60%',
                data: {{ project_sources.data }},
                itemStyle: {
                    color: '#f59e0b'
                }
            }
        ]
    };
    projectSourceChart.setOption(projectSourceOption);

    // 响应式处理
    window.addEventListener('resize', function() {
        projectTypeChart.resize();
        projectSourceChart.resize();
    });
</script>
{% endblock %}